import React from "react";
import SearchPanel from "./search-panel";
import { List } from "./list";
import { useDocumentTitle, useDebounce } from "hooks";
import styled from "@emotion/styled";
import { ErrorBox, Row, ScreenContainer } from "components/lib";
import { Button } from "antd";
import { useProjects, useUsers } from "server";
import { useProjectsSearchParams } from "./util";
import { useProjectModal } from "hooks/useProjectModal";

const Header = styled(Row)``;

const ProjectList = () => {
  useDocumentTitle("项目列表", false);
  const [param, setParam] = useProjectsSearchParams();
  const debounceParam = useDebounce(param);
  const { isLoading, error, data: list } = useProjects(debounceParam);
  const { data: users } = useUsers();
  const { open } = useProjectModal();

  return (
    <ScreenContainer>
      <Header between marginBottom={2}>
        <h2>项目列表</h2>
        <Button type="link" onClick={open}>
          创建项目
        </Button>
      </Header>
      <SearchPanel param={param} setParam={setParam} />
      {error && <ErrorBox error={error} />}
      <List dataSource={list || []} users={users || []} loading={isLoading} />
    </ScreenContainer>
  );
};

export default ProjectList;
